<template>
  <van-nav-bar
    title="搜索"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.push('/');
      }
    "
  />

  <van-search
    v-model="sousuoval"
    shape="round"
    placeholder="请输入搜索关键词"
  />
  <!-- 无数据 -->
  <template v-if="soudata.length == 0 || sousuoval.length == 0">
    <van-empty description="暂无搜索数据" />
  </template>


<!-- 有数据 -->
<template v-else>
  <van-cell-group v-for="item in soudata">
    <router-link :to="'/xiangqing/' + item.goods_id">
      <van-cell :title="item.goods_name" />
    </router-link>
  </van-cell-group>
</template>

</template>


<script setup>
import { ref, watch } from "vue";
import { souApi } from "@/api/api";
let sousuoval = ref("");
let soudata = ref([]);

import _ from "lodash";
watch(
  sousuoval,
  _.debounce((sousuoval) => {
    souApi(sousuoval).then((res) => {
      console.log(res);
      soudata.value = res.data.message;
    });
  }, 3000)
);
</script>

<style lang="scss" scoped>
</style>